<template>
  <div class="home" @touchmove.prevent>
    <section v-show="showLoading" :class="{'linear-backgroud':showAnimation}">
      <div class="door-l" :class="{'door-l-ani':showAnimation}">
        <img v-show="showDoor" :src="left_door" fit="fill">
      </div>
      <div class="door-r" :class="{'door-r-ani':showAnimation}">
        <img v-show="showDoor" :src="right_door" fit="fill">
      </div>
      <div v-show="loadingItem" class="mouse-loading">
        <img :src="mouse" fit="scale-down" />
      </div>
      <div v-show="loadingItem" class="loading-progress">{{percent}}%</div>
      <div v-show="loadingItem" class="loading-tip">
        <span>客官稍等，马上就好</span>
        <!-- <img :src="wait_text" /> -->
      </div>
    </section>
    <div class="theme">
      <div class="theme-cloud">
        <van-image width="70%" class="theme-cloud-left-top" :src="cloud_left_top" fit="scale-down">
        </van-image>
        <van-image width="70%" class="theme-cloud-right-top" :src="cloud_right_top" fit="scale-down">
        </van-image>
        <van-image width="100%" class="theme-cloud-left-down" :src="cloud_left_down" fit="scale-down">
        </van-image>
        <van-image width="70%" class="theme-cloud-right-down" :src="cloud_right_down" fit="scale-down">
        </van-image>
      </div>
      <div class="theme-picture">
        <van-image width="100%" height="100%" :src="picture_scroll" fit="scale-down">
        </van-image>
      </div>
      <div class="theme-door-god">
        <van-image class="theme-door-god-left" :src="door_god_left" fit="scale-down">
        </van-image>
        <van-image class="theme-door-god-right" :src="door_god_right" fit="scale-down">
        </van-image>
      </div>
      <div class="theme-button" @click="pageTo('/choice')">
        <van-image :src="button_img" fit="scale-down">
        </van-image>
      </div>
    </div>

  </div>
</template>

<script>
  let imgs = [
    'http://h5static.weiyoho.com/assets/theme/mouse.png',
    'http://h5static.weiyoho.com/assets/theme/right-door-god.png',
    'http://h5static.weiyoho.com/assets/theme/left-door-god.png',
    'http://h5static.weiyoho.com/assets/theme/left-door.png',
    'http://h5static.weiyoho.com/assets/theme/right-door.png',
    'http://h5static.weiyoho.com/assets/theme/cloud-left-top.png',
    'http://h5static.weiyoho.com/assets/theme/cloud-right-top.png',
    'http://h5static.weiyoho.com/assets/theme/cloud-left-down.png',
    'http://h5static.weiyoho.com/assets/theme/cloud-right-down.png',
    'http://h5static.weiyoho.com/assets/theme/picture-scroll.png',
    'http://h5static.weiyoho.com/assets/theme/button.png',

    require('../assets/picture/hua-text1.png'),
    require('../assets/picture/hua-text2.png'),
    require('../assets/picture/hua-text3.png'),
    require('../assets/picture/hua-text4.png'),
    require('../assets/picture/hua-text5.png'),
    require('../assets/picture/hua-text6.png'),
    'http://h5static.weiyoho.com/assets/picture/hua-default-text1.png',
    'http://h5static.weiyoho.com/assets/picture/hua-default-text2.png',
    'http://h5static.weiyoho.com/assets/picture/hua-default-text3.png',
    'http://h5static.weiyoho.com/assets/picture/hua-default-text4.png',
    'http://h5static.weiyoho.com/assets/picture/hua-default-text5.png',
    'http://h5static.weiyoho.com/assets/picture/hua-default-text6.png',
    require('../assets/picture/carp-building.png'),
    require('../assets/picture/lion-building.png'),
    require('../assets/picture/ingot-building.png'),
    require('../assets/picture/carp.png'),
    require('../assets/picture/lion.png'),
    require('../assets/picture/ingot.png'),
    require('../assets/picture/carp-clothes.png'),
    require('../assets/picture/lion-clothes.png'),
    require('../assets/picture/ingot-clothes.png'),
    require('../assets/picture/carp-water.png'),
    require('../assets/picture/lion-cloud.png'),
    require('../assets/picture/ingot-sea.png'),
    'http://h5static.weiyoho.com/assets/picture/tab-element-01.png',
    'http://h5static.weiyoho.com/assets/picture/tab-element-02.png',
    'http://h5static.weiyoho.com/assets/picture/tab-building-01.png',
    'http://h5static.weiyoho.com/assets/picture/tab-building-02.png',
    'http://h5static.weiyoho.com/assets/picture/tab-clothes-01.png',
    'http://h5static.weiyoho.com/assets/picture/tab-clothes-02.png',
    'http://h5static.weiyoho.com/assets/picture/tab-bottom-01.png',
    'http://h5static.weiyoho.com/assets/picture/tab-bottom-02.png',
    'http://h5static.weiyoho.com/assets/picture/element-01.png',
    'http://h5static.weiyoho.com/assets/picture/element-02.png',
    'http://h5static.weiyoho.com/assets/picture/element-03.png',
    'http://h5static.weiyoho.com/assets/picture/building-01.png',
    'http://h5static.weiyoho.com/assets/picture/building-02.png',
    'http://h5static.weiyoho.com/assets/picture/building-03.png',
    'http://h5static.weiyoho.com/assets/picture/clothes-01.png',
    'http://h5static.weiyoho.com/assets/picture/clothes-02.png',
    'http://h5static.weiyoho.com/assets/picture/clothes-03.png',
    'http://h5static.weiyoho.com/assets/picture/bottom-01.png',
    'http://h5static.weiyoho.com/assets/picture/bottom-02.png',
    'http://h5static.weiyoho.com/assets/picture/bottom-03.png',
    'http://h5static.weiyoho.com/assets/picture/next.png',
    'http://h5static.weiyoho.com/assets/picture/preview.png',
    'http://h5static.weiyoho.com/assets/picture/show-preview.png',
    'http://h5static.weiyoho.com/assets/picture/logo.png',

    require('../assets/bg-pink.png'),
    require('../assets/bg-red.png'),
    require('../assets/bg-cut.png'),
    require('../assets/bg-logo.png'),
    require('../assets/calendar/bg-logo.png'),
    require('../assets/picture/picture-bg.png'),
    require('../assets/calendar/do-01.png'),
    require('../assets/calendar/do-02.png'),
    require('../assets/calendar/do-03.png'),
    require('../assets/calendar/do-04.png'),
    require('../assets/calendar/zero.png'),
    require('../assets/calendar/first.png'),
    require('../assets/calendar/second.png'),
    require('../assets/calendar/third.png'),

    require('../assets/calendar/li-text1.png'),
    require('../assets/calendar/li-text2.png'),
    require('../assets/calendar/li-text3.png'),
    require('../assets/calendar/li-text4.png'),
    require('../assets/calendar/li-text5.png'),
    require('../assets/calendar/li-text6.png'),
    require('../assets/calendar/li-text7.png'),
    'http://h5static.weiyoho.com/assets/calendar/preview.png',
    'http://h5static.weiyoho.com/assets/calendar/show-preview.png',
    'http://h5static.weiyoho.com/assets/calendar/next.png',

    'http://h5static.weiyoho.com/assets/card1.png',
    'http://h5static.weiyoho.com/assets/card2.png',
    'http://h5static.weiyoho.com/assets/card3.png',
    'http://h5static.weiyoho.com/assets/guide-box.png',
    'http://h5static.weiyoho.com/assets/guide-ele.png',
    'http://h5static.weiyoho.com/assets/share/text.png',
    'http://h5static.weiyoho.com/assets/share/picture-save.png',
    'http://h5static.weiyoho.com/assets/share/picture-share.png',
    'http://h5static.weiyoho.com/assets/share/calendar-save.png',
    'http://h5static.weiyoho.com/assets/share/calendar-share.png',
    'http://h5static.weiyoho.com/assets/share/paper-save.png',
    'http://h5static.weiyoho.com/assets/share/paper-share.png',

    'http://h5static.weiyoho.com/assets/paper/preview.png',
    'http://h5static.weiyoho.com/assets/paper/show-preview.png',
    'http://h5static.weiyoho.com/assets/paper/next.png',
    'http://h5static.weiyoho.com/assets/paper/element-1.png',
    'http://h5static.weiyoho.com/assets/paper/element-2.png',
    'http://h5static.weiyoho.com/assets/paper/element-3.png',
    'http://h5static.weiyoho.com/assets/paper/element-4.png',
    require('../assets/paper/box-1.png'),
    require('../assets/paper/box-2.png'),
    require('../assets/paper/box-3.png'),
    'http://h5static.weiyoho.com/assets/paper/sel-box-1.png',
    'http://h5static.weiyoho.com/assets/paper/sel-box-2.png',
    'http://h5static.weiyoho.com/assets/paper/sel-box-3.png',
    require('../assets/paper/text-1.png'),
    require('../assets/paper/text-2.png'),
    require('../assets/paper/text-3.png'),
    'http://h5static.weiyoho.com/assets/paper/sel-text-1.png',
    'http://h5static.weiyoho.com/assets/paper/sel-text-2.png',
    'http://h5static.weiyoho.com/assets/paper/sel-text-3.png',
    require('../assets/paper/top-fan.png'),
    require('../assets/paper/top-knot.png'),
    require('../assets/paper/top-lantern.png'),
    'http://h5static.weiyoho.com/assets/paper/sel-top-1.png',
    'http://h5static.weiyoho.com/assets/paper/sel-top-2.png',
    'http://h5static.weiyoho.com/assets/paper/sel-top-3.png',
    require('../assets/paper/down-fish.png'),
    require('../assets/paper/down-mouse.png'),
    require('../assets/paper/down-peony.png'),
    'http://h5static.weiyoho.com/assets/paper/sel-bottom-1.png',
    'http://h5static.weiyoho.com/assets/paper/sel-bottom-2.png',
    'http://h5static.weiyoho.com/assets/paper/sel-bottom-3.png',
    require('../assets/paper/default-text-1.png'),
    require('../assets/paper/default-text-2.png'),
    require('../assets/paper/default-text-3.png'),
    require('../assets/paper/default-text-4.png'),
    require('../assets/paper/default-text-5.png'),
    require('../assets/paper/default-text-6.png'),
  ]
  import {
    Image as vantImage,
    Button,
    Tab,
    Tabs,
    NavBar
  } from "vant";

  const sha1 = require('sha1');

  export default {
    name: "home",
    components: {
      [vantImage.name]: vantImage,
      [Button.name]: Button,
      [Tab.name]: Tab,
      [Tabs.name]: Tabs,
      [NavBar.name]: NavBar
    },
    watch: {
      count: function (val) {
        if (val > 50) {
          this.showDoor = true
        }
        if (val === imgs.length) {
          // 图片加载完成后跳转页面
          // this.$router.push({ path: 'theme' })
          this.allImgLoadDone = true
          setTimeout(() => {
            this.loadingItem = false 
            this.openDoor()
          }, 300)
        }
      }
    },
    data() {
      return {
        count: 0,
        percent: '',
        allImgLoadDone: false,
        showDoor: false, //显示门神
        showLoading: this.globalShowLoading,
        loadingItem: true, //显示鼠头和百分数字
        progress: 0,
        loadedImage: 0,
        showAnimation: false,
        left_door: 'http://h5static.weiyoho.com/assets/theme/left-door.png',
        right_door: 'http://h5static.weiyoho.com/assets/theme/right-door.png',
        mouse: 'http://h5static.weiyoho.com/assets/theme/mouse.png',

        //主题页
        showTheme: false,
        cloud_left_top: 'http://h5static.weiyoho.com/assets/theme/cloud-left-top.png',
        cloud_right_top: 'http://h5static.weiyoho.com/assets/theme/cloud-right-top.png',
        cloud_left_down: 'http://h5static.weiyoho.com/assets/theme/cloud-left-down.png',
        cloud_right_down: 'http://h5static.weiyoho.com/assets/theme/cloud-right-down.png',
        door_god_right: 'http://h5static.weiyoho.com/assets/theme/right-door-god.png',
        door_god_left: 'http://h5static.weiyoho.com/assets/theme/left-door-god.png',
        picture_scroll: 'http://h5static.weiyoho.com/assets/theme/picture-scroll.png',
        button_img: 'http://h5static.weiyoho.com/assets/theme/button.png',
        // wait_text: 'http://h5static.weiyoho.com/assets/share/text.png'
      };
    },
    created() {},
    mounted() {
      this.preload()
    },
    methods: {
      preload() {
        for (let img of imgs) {
          let image = new Image()
          image.src = img
          image.onload = () => {
            this.count++
            // 计算图片加载的百分数，绑定到percent变量
            let percentNum = Math.floor((this.count / imgs.length) * 100)
            this.percent = `${percentNum}`
          }
        }
      },
      openDoor() {
        this.showAnimation = true
        setTimeout(() => {
          // this.$router.push('/theme');
          this.showLoading = false
          this.globalShowLoading = false
          this.showTheme = true
          // this.autoPlayMusic('#bg-music', '', true)
          // this.Play('#bg-music', this.bgmMP3, true)

        }, 2000)
      },

      pageTo(url) {
        this.$router.replace(url)
        // this.$router.push(url);
      },
    }
  }
</script>
<style lang="less">
  .home {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    box-sizing: border-box;
  }

  // 门 loading 页
  section {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    perspective: 1000px;
    /*给父盒子添加透视效果*/
    box-sizing: border-box;
    overflow: hidden;
    background: #fff;
    // background: #9e2d1d;
  }

  .linear-backgroud {
    background-color: rgba(255, 255, 255, 0);
    // -webkit-animation: backgroud-ani 2.5s ease-in-out;
  }

  @keyframes backgroud-ani {
    0% {
      background-color: #fff;
    }

    20% {
      background-color: rgba(252, 240, 240, 0.9);
    }

    40% {
      background-color: rgba(247, 220, 196, 0.9);
    }

    60% {
      background-color: rgba(249, 223, 179, 0.7);
    }

    80% {
      background-color: rgba(249, 226, 152, 0.3);
    }

    100% {
      background-color: rgba(244, 212, 110, 0.1);
    }
  }

  .door-l,
  .door-r {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    background-color: #9e2d1d;
    transition: all 1s;

    /*两个门都做过渡效果*/
    img {
      height: 100vh;
      width: 100%;
    }
  }

  .door-l {
    left: 0;
    border-right: 1px solid #000;
    transform-origin: left;
    /* 左侧盒子按照左边翻转*/
  }

  .door-l-ani {
    -webkit-animation: left-door-ani 2.5s ease-in-out;
  }

  .door-r {
    right: 0;
    border-left: 1px solid #000;
    transform-origin: right;
    /*  右侧盒子按照右边翻转*/
  }

  .door-r-ani {
    -webkit-animation: right-door-ani 2.5s ease-in-out;
  }

  .mouse-loading {
    position: absolute;
    bottom: 35vh;
    width: 100px;
    left: 40%;
    z-index: 99;
    -webkit-animation: mouse-down-up-ani 2s ease-in-out infinite;

    img {
      width: 100px;
    }
  }

  .loading-progress {
    display: flex;
    justify-content: center;
    width: 100%;
    color: #fff;
    position: absolute;
    bottom: 30vh;
    left: 0;
    right: 0;
    z-index: 99;
  }

  .loading-tip {
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 20vh;
    left: 0;
    right: 0;
    z-index: 99;

    span {
      font-size: 22px;
      color: #fff;
    }

    img {
      width: 200px;
    }
  }

  @keyframes left-door-ani {
    from {
      transform: rotateY(0deg);
    }

    to {
      transform: rotateY(130deg);
    }
  }

  @keyframes right-door-ani {
    from {
      transform: rotateY(0deg);
    }

    to {
      transform: rotateY(-130deg);
    }
  }

  @keyframes mouse-down-up-ani {
    0% {
      transform: rotate(0deg);
    }

    50% {
      transform: rotate(10deg);
    }

    100% {
      transform: rotate(0deg);
    }
  }

  // 主题页
  .theme {
    width: 100vw;
    height: 100vh;
    background: url(../assets/bg-red.png) no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
    box-sizing: border-box;

    &-cloud {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      width: 100vw;
      height: 100vh;
      overflow: hidden;

      &-left-top {
        position: absolute;
        left: 0;
        top: 55px;
        transform: translateX(-55px);
        -webkit-animation: cloud-left-top-ani 15s ease-in-out infinite;
      }

      &-left-down {
        position: absolute;
        left: 0;
        bottom: -75px;
        transform: translateX(-80px);
        -webkit-animation: cloud-left-down-ani 20s ease-in-out infinite;
      }

      &-right-top {
        position: absolute;
        top: 120px;
        right: 0;
        transform: translateX(65px);
        -webkit-animation: cloud-right-top-ani 15s ease-in-out infinite;
      }

      &-right-down {
        position: absolute;
        right: 0;
        bottom: 20px;
        transform: translateX(85px);
        -webkit-animation: cloud-right-down-ani 20s ease-in-out infinite;
      }
    }

    &-picture {
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      opacity: 0;
      -webkit-animation: picture-ani ease-in-out 1 3.5s;
      animation-fill-mode: forwards;
    }

    &-door-god {
      position: relative;
      top: 0;
      z-index: 9;
      -webkit-animation: door-god-ani 8s ease-in-out infinite;

      &-left {
        position: absolute;
        left: 0;
        top: 0;
        transform: translateX(-150px);
      }

      &-right {
        position: absolute;
        right: 0;
        top: 0;
        transform: translateX(150px);
      }
    }

    &-button {
      position: absolute;
      bottom: 0px;
      width: 100vw;
      height: 145px;
      overflow: hidden;
      z-index: 99;
      -webkit-animation: button-ani 3s ease-in-out infinite;
    }
  }

  @keyframes door-god-ani {

    0%,
    50% {
      transform: scale(1);
      /*开始为原始大小*/
    }

    25%,
    75% {
      transform: scale(1.01);
      /*放大1.1倍*/
    }
  }

  @keyframes button-ani {

    0%,
    50% {
      transform: scale(1);
      /*开始为原始大小*/
    }

    25%,
    75% {
      transform: scale(1.08);
      /*放大1.1倍*/
    }
  }

  @keyframes picture-ani {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes cloud-left-top-ani {
    0% {
      transform: translateX(-45px);
      opacity: 0;
    }

    15% {
      opacity: 1;
    }

    100% {
      transform: translateX(-195px);
    }
  }

  @keyframes cloud-left-down-ani {
    0% {
      transform: translateX(-55px);
      opacity: 0;
    }

    15% {
      opacity: 1;
    }

    100% {
      transform: translateX(-180px);
    }
  }

  @keyframes cloud-right-top-ani {
    0% {
      transform: translateX(45px);
      opacity: 0;
    }

    15% {
      opacity: 1;
    }

    100% {
      transform: translateX(105px);
    }
  }

  @keyframes cloud-right-down-ani {
    0% {
      transform: translateX(45px);
      opacity: 0;
    }

    15% {
      opacity: 1;
    }

    100% {
      transform: translateX(125px);
    }
  }
</style>